<template>
  <div class="reports">
    <div class="breadcrumb-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div id="bar" style="height: 400px"></div>
    <canvas id="myChart2" width="400px" height="400px"></canvas>
  </div>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/chart/line")
require("echarts/lib/component/legend");
import {getBar} from '@/http/api'
import Chart from 'chart.js';
export default {
  data() {
    return {};
  },
  methods: {
      //获取柱状图数据
    getBarData() {
        getBar()
        .then(res => {
            this.initailBar({
                title: {
                    text: '条形图',
                    x: 'center',
                    top: '30',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bolder',
                        color: '#fff'          // 主标题文字颜色
                    },
                },
                // 默认色板
    color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
            '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
                 tooltip: {},
                 ...res.data
                 })
        })
    },
    initailBar(options) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("bar"));
      // 绘制图表
      myChart.setOption(options);
    }
  },
  mounted() {
    //   this.initailBar()
    this.getBarData()
    var ctx2 = document.getElementById("myChart2");

        var myChart2 = new Chart(ctx2, {
            type: "line",
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                datasets: [
                    {
                        label: "test1",
                        backgroundColor: "rgba(225,10,10,0.3)",
                        borderColor: "rgba(225,103,110,1)",
                        borderWidth: 1,
                        pointStrokeColor: "#fff",
                        pointStyle: "crossRot",
                        data: [65, 59, 0, 81, 56, 10, 40, 22, 32, 54, 10, 30],
                        cubicInterpolationMode: "monotone",
                        spanGaps: "false",
                        fill: "false"
                    }
                ]
            },
            options: {
                
            }

        });
  }
};
</script>
<style>
</style>